<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩分析</title>
    <script src="./ec.min.js"></script>
    <link rel="stylesheet" href="./student-analysis.css">
</head>
<body>
    <div class="profile-card">
        <div class="profile-info">
            <div class="info-row">院系：公共管理学院（应用管理学院）</div>
            <div class="info-row">专业硕士 • 学位硕士</div>
            <div class="info-row">学习方式：全日制 • 学制：4年</div>
        </div>

        <div class="stats-row">
            <div class="stat-box">
                <div class="stat-number">7</div>
                <div class="stat-label">发表论文</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">2</div>
                <div class="stat-label">出作品</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">6</div>
                <div class="stat-label">专利授权</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">3</div>
                <div class="stat-label">参与项目</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">8</div>
                <div class="stat-label">获奖情况</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">2000</div>
                <div class="stat-label">奖学金</div>
            </div>

            <div class="score-section">
                <div class="score-item">
                    <div class="score-value">96</div>
                    <div class="score-label">总成绩</div>
                </div>
                <div class="score-item">
                    <div class="score-value">85</div>
                    <div class="score-label">专业排名</div>
                </div>
                <div class="score-item">
                    <div class="score-value">25/256</div>
                    <div class="score-label">专业排名</div>
                </div>
            </div>

            <div class="right-section">
                <div class="avatar-section"></div>
                <div class="tags-section">
                    <span class="tag">00后</span>
                    <span class="tag">学霸</span>
                    <span class="tag">四川成都</span>
                </div>
            </div>
        </div>

        <div class="stats-row">
            <div class="stat-box">
                <div class="stat-number">88</div>
                <div class="stat-label">平均分</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">90</div>
                <div class="stat-label">必修课均分</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">85</div>
                <div class="stat-label">选修课均分</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">5门</div>
                <div class="stat-label">TOP10%课程</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">10门</div>
                <div class="stat-label">TOP30%课程</div>
            </div>
        </div>

       
    </div>

    <div class="content-section">
        <div class="section-title">校成绩</div>
        <div class="description">
            学生在校成绩概况：成绩稳定，成绩分布在70-90分之间，其中，21门特优成绩(90分以上)，门门成绩及格。
        </div>
        <div class="chart-container" id="gradeChart"></div>
        <div class="chart-container" id="gradeDistributionChart"></div>
    </div>

    <div class="stats-cards">
        <div class="stats-card">
            <div class="stats-icon blue">
                <svg viewBox="0 0 24 24">
                    <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" />
                </svg>
            </div>
            <div class="stats-content">
                <div class="stats-number">
                    15
                    <span class="stats-unit">分</span>
                </div>
                <div class="stats-label">选修计划课学分</div>
                <div class="stats-label">20分</div>
            </div>
        </div>
    
        <div class="stats-card">
            <div class="stats-icon blue">
                <svg viewBox="0 0 24 24">
                    <path
                        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" />
                    <path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z" />
                </svg>
            </div>
            <div class="stats-content">
                <div class="stats-number">
                    88
                    <span class="stats-unit">分</span>
                </div>
                <div class="stats-label">必修课均分 80</div>
                <div class="stats-label">选修课均分 86</div>
            </div>
        </div>
    
        <div class="stats-card">
            <div class="stats-icon orange">
                <svg viewBox="0 0 24 24">
                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                </svg>
            </div>
            <div class="stats-content">
                <div class="stats-number">
                    8
                    <span class="stats-unit">门</span>
                </div>
                <div class="stats-label">已修课程数量</div>
                <div class="stats-label">
                    必修课数 13门 选修课数 3门
                </div>
            </div>
        </div>
    </div>

    <div class="content-section">
        <div class="section-title">优势课程与劣势课程分析</div>
        <div class="description">
            计算机专业基础和环境设计与艺术课程表现优异，大学数学和大学英语有待提高。
        </div>
        <div class="chart-container" id="courseAnalysisChart"></div>
    </div>

    <div class="content-section research-section">
        <div class="section-title">学术科研</div>
        <div class="research-description">
            学生在校学术科研成绩显著：发表学术论文2篇，其中1篇为核心期刊论文；专利申请2项，其中1项已获授权；参与科研项目2项，其中1项为国家级项目。在学术研究方面表现出色，研究成果丰富。
        </div>
        
        <div class="research-keywords">
            <span class="keyword">运营管理</span>
            <span class="keyword">大学英语1</span>
            <span class="keyword">商务技术分析</span>
            <span class="keyword">大学英语2</span>
            <span class="keyword">现代决策</span>
            <span class="keyword">计算方法</span>
            <span class="keyword">形势与政策</span>
        </div>

    </div>

    <div class="research-grid">
        <div class="keywords-cloud">
            <div class="keywords-title">科研关键词</div>
            <div class="keywords-container">
                <span class="keyword-tag blue">运营管理</span>
                <span class="keyword-tag yellow">大学英语1</span>
                <span class="keyword-tag green">商务技术分析</span>
                <span class="keyword-tag blue">大学英语2</span>
                <span class="keyword-tag yellow">现代决策</span>
                <span class="keyword-tag green">计算方法</span>
                <span class="keyword-tag blue">形势与政策</span>
            </div>
        </div>

        <div class="publications">
            <div class="section-title">成果发表/参与项目</div>
            <div class="publication-item">
                <div class="publication-type">期刊论文</div>
                <div class="publication-content">
                    <div class="publication-title">从西部发展到城市转型升级-中国城市市场治理调研十年...</div>
                    <div class="publication-info">中国人口资源 刊物(SCI)</div>
                </div>
                <div class="publication-author">第11作者</div>
            </div>

            <div class="publication-item">
                <div class="publication-type">会议论文</div>
                <div class="publication-content">
                    <div class="publication-title">一种SAR图像增强的ELM优化器及其快速收敛算法</div>
                    <div class="publication-info">中国学位与研究生教育学会</div>
                </div>
                <div class="publication-author">第21作者</div>
            </div>

            <div class="publication-item">
                <div class="publication-type">专利</div>
                <div class="publication-content">
                    <div class="publication-title">一种SAR图像增强的ELM优化器及其快速收敛算法实验</div>
                    <div class="publication-info">专利专刊</div>
                </div>
                <div class="publication-author">第11作者</div>
            </div>
        </div>
    </div>

    <script>
        // 成绩分布柱状图
        const gradeChart = echarts.init(document.getElementById('gradeChart'));
        const gradeOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['0-60', '60-70', '70-80', '80-90', '90以上'],
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value',
                name: '课程数量'
            },
            series: [{
                name: '成绩分布',
                type: 'bar',
                barWidth: '40%',
                data: [1, 1, 3, 5, 1],
                itemStyle: {
                    color: '#4080ff'
                }
            }]
        };
        gradeChart.setOption(gradeOption);

        // 新增成绩分布柱状图
        const gradeDistributionChart = echarts.init(document.getElementById('gradeDistributionChart'));
        const gradeDistributionOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: '10%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['0', '2', '4', '6', '8'],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#999'
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#eee'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#999'
                }
            },
            series: [{
                type: 'bar',
                barWidth: 20,
                data: [1, 2, 3, 5, 1],
                itemStyle: {
                    color: '#4080ff'
                }
            }]
        };
        gradeDistributionChart.setOption(gradeDistributionOption);

        // 课程分析雷达图
        const courseChart = echarts.init(document.getElementById('courseAnalysisChart'));
        const courseOption = {
            tooltip: {
                show: true
            },
            legend: {
                show: false
            },
            series: [
                {
                    type: 'graph',
                    layout: 'none',
                    symbolSize: 50,
                    roam: false,
                    label: {
                        show: true
                    },
                    edgeSymbol: ['none', 'none'],
                    edgeSymbolSize: [4, 10],
                    edgeLabel: {
                        fontSize: 12
                    },
                    data: [
                        {
                            name: '优势',
                            x: 300,
                            y: 200,
                            itemStyle: {
                                color: '#4e6ef2'
                            }
                        },
                        {
                            name: '劣势',
                            x: 500,
                            y: 200,
                            itemStyle: {
                                color: '#ffd666'
                            }
                        },
                        {
                            name: '计算机专业基础',
                            x: 200,
                            y: 100,
                            value: '计算机专业基础\n44',
                            symbolSize: 30,
                            itemStyle: {
                                color: '#e6f7ff'
                            },
                            label: {
                                show: true,
                                position: 'right',
                                formatter: '{b}\n{c}'
                            }
                        },
                        {
                            name: '环境设计与艺术课程',
                            x: 200,
                            y: 300,
                            value: '环境设计与艺术课程\n68',
                            symbolSize: 30,
                            itemStyle: {
                                color: '#e6f7ff'
                            },
                            label: {
                                show: true,
                                position: 'right',
                                formatter: '{b}\n{c}'
                            }
                        },
                        {
                            name: '大学数学',
                            x: 600,
                            y: 100,
                            value: '大学数学\n44',
                            symbolSize: 30,
                            itemStyle: {
                                color: '#fff7e6'
                            },
                            label: {
                                show: true,
                                position: 'left',
                                formatter: '{b}\n{c}'
                            }
                        },
                        {
                            name: '大学英语',
                            x: 600,
                            y: 300,
                            value: '大学英语\n68',
                            symbolSize: 30,
                            itemStyle: {
                                color: '#fff7e6'
                            },
                            label: {
                                show: true,
                                position: 'left',
                                formatter: '{b}\n{c}'
                            }
                        }
                    ],
                    links: [
                        {
                            source: '计算机专业基础',
                            target: '优势',
                            lineStyle: {
                                color: '#4e6ef2',
                                width: 2
                            }
                        },
                        {
                            source: '环境设计与艺术课程',
                            target: '优势',
                            lineStyle: {
                                color: '#4e6ef2',
                                width: 2
                            }
                        },
                        {
                            source: '大学数学',
                            target: '劣势',
                            lineStyle: {
                                color: '#ffd666',
                                width: 2
                            }
                        },
                        {
                            source: '大学英语',
                            target: '劣势',
                            lineStyle: {
                                color: '#ffd666',
                                width: 2
                            }
                        }
                    ]
                }
            ]
        };
        courseChart.setOption(courseOption);

        // 响应式调整
        window.addEventListener('resize', function() {
            gradeChart.resize();
            gradeDistributionChart.resize();
            courseChart.resize();
        });
    </script>
</body>
</html> 